<!-- wyf 2022-3-30 -->
<template>
  <a-config-provider
    :auto-insert-space-in-button="autoInsertSpaceInButton"
    :component-size="componentSize"
    :csp="csp"
    :direction="direction"
    :dropdown-match-select-width="dropdownMatchSelectWidth"
    :form="form"
    :get-popup-container="getPopupContainer"
    :get-target-container="getTargetContainer"
    :input="input"
    :locale="locale"
    :page-header="pageHeader"
    :prefix-cls="prefixCls"
    :render-empty="renderEmpty"
    :space="space"
    :transform-cell-text="transformCellText"
    :virtual="virtual"
    :auto-resize="autoResize"
  >
    <template v-if="$slots.renderEmpty" #renderEmpty>
      <slot name="renderEmpty" />
    </template>
    <slot />
  </a-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ConfigProvider } from 'ant-design-vue'
export default defineComponent({
  name: 'ZConfigProvider',
  components: {
    AConfigProvider: ConfigProvider
  },
  props: {
    autoInsertSpaceInButton: {
      type: Boolean,
      default: true
    },
    componentSize: {
      type: String,
      default: undefined
    },
    csp: {
      type: Object,
      default: undefined
    },
    direction: {
      type: String,
      default: 'ltr'
    },
    dropdownMatchSelectWidth: {
      type: [Number, Boolean],
      default: undefined
    },
    form: {
      type: Object,
      default: undefined
    },
    getPopupContainer: {
      type: Function,
      default: undefined
    },
    getTargetContainer: {
      type: Function,
      default: undefined
    },
    input: {
      type: Object,
      default: undefined
    },
    locale: {
      type: Object,
      default: undefined
    },
    pageHeader: {
      type: Object,
      default: undefined
    },
    prefixCls: {
      type: String,
      default: 'ant'
    },
    renderEmpty: {
      type: Function,
      default: undefined
    },
    space: {
      type: Object,
      default: undefined
    },
    transformCellText: {
      type: Function,
      default: undefined
    },
    virtual: {
      type: Boolean,
      default: undefined
    },
    autoResize: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    if (this.autoResize) {
      document.body.style.zoom = 100 / this.getRatio()
      document.body.style.width = `${this.getRatio()}vw`
      document.body.style.height = `${this.getRatio()}vh`
    }
  },
  methods: {
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }
      if (ratio) {
        ratio = Math.round(ratio * 100)
      }
      return ratio
    }
  }
})
</script>
